<template>
 <Modal v-model="Is_show" width="394" :styles="{top: '20vh'}" @on-cancel="onClose">
        <div slot="header">
            <h1>登录一起家具网帐号</h1>
        </div>
        <div class="tips">验证即登录，未注册将自动创建一起家具网帐号</div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline :show-message="true">
            <FormItem prop="tel" label="手机号">
                <div class="item">
                    <Input maxlength="11" type="text" v-model="formInline.tel" placeholder="请输入手机号码"></Input>
                </div>
            </FormItem>
            <FormItem prop="code" label="验证码">
                <div class="item code">
                    <Input type="text" suffix=" " v-model="formInline.code" placeholder="请输入手机验证码"></Input>
                    <span class="Noselect" v-show="show" @click="_getCode">获取验证码</span>
                    <span v-show="!show" class="count">{{count}} s</span>
                </div>
            </FormItem>
            <FormItem class="submit">
                <Button type="error" @click="handleSubmit('formInline')">登录</Button>
            </FormItem>
            <FormItem prop="pact">
                <div class="item pact">
                    <Checkbox v-model="formInline.pact">阅读并接受</Checkbox>
                    <nuxt-link to="/about/agreement">
                        <span>一起家具网用户协议</span>
                    </nuxt-link>
                    <span>与</span>
                    <nuxt-link to="/about/privacypolicy">
                        <span>隐私政策</span>
                    </nuxt-link>
                </div>
            </FormItem>
        </Form>
        <div slot="footer"></div>
    </Modal>
    
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import * as Cookies from 'js-cookie'
export default {
    props: {
      is_show:{
          type:Boolean,
          default:false
      },
    },
    data(){
        const validateTel = (rule, value, callback) => {
            if(!(/^1[3456789]\d{9}$/.test(this.formInline.tel))){ 
                callback(new Error('电话格式不正确'));
            } else{
                callback();   
            }
        }
        const validatePact = (rule, value, callback) => {
            if(!this.formInline.pact){ 
                callback(new Error('请先勾选协议'));
            } else{
                callback();   
            }
        }
        return{
            show: true,
            count: '',
            timer: null,
            Is_show:null,
            formInline: {
                tel: '',//预约电话
				code:'',//验证码
                pact:false,
            },
            ruleInline: {
                tel: [
                    { required: true, message: '请输入您的电话', trigger: 'blur' },
					{ type: 'string', min: 7,message: '电话格式不正确', trigger: 'change' },
                    { required: true, validator:validateTel, trigger: 'change' }
                ],
				code: [
                    { required: true, message: '请输入手机验证码', trigger: 'blur' }
                ],
                pact:[
                    { required: true, validator:validatePact, trigger: 'change' }
                ]
            }
        }
    },
    created(){
        
    },
    computed:{
		...mapState(['address','userInfo'])
	},
    mounted(){
        
    },
    methods:{
        // 登录
		handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (!this.formInline.pact) {
                        this.$Message.error('请先勾选协议');
                        return
                    }
                    this._submit()
                } else {
                    // this.$Message.error('Fail!');
                }
            })
        },
        async _submit(){
            let{data:{code,data,msg}} = await this.$http.post(this.$API.login,{
                user_mobile:this.formInline.tel,
                verifiy_code:this.formInline.code,
                type:1,
                platform:3,
            })
            if (code==200) {
                this.$store.commit('ChangeUserInfo',data.data);
                Cookies.set('userInfo', data.data, { expires: 1 / 6 })
                this.$emit('onClose',false)
            }else{
                this.$Message.error(msg);
            }
        },
        //验证码
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },1000)
            }
        },
        async _getCode(){
            let{data:{code,data,msg}} = await this.$http.post(this.$API.sendToSms,{
                mobile:this.formInline.tel,
                type:1
            })
            if (code==200) {
                this.getCode()
                
            }else{
                this.$Message.error(msg);
                
            }
        },
        // 关闭
        onClose(){
            console.log('Is_show----------------',this.Is_show)
            this.$emit('onClose',false)
        }
    },
    watch:{
        is_show(val, oldVal){//普通的watch监听
            console.log('value----------------',val)
            this.Is_show = val
        }
    }
}
</script>
<style scoped>
    .tips{
        font-size: 14px;
        margin-bottom: 54px;
        font-weight: 400;
        color: #999999;
    }
    .ivu-form-inline .ivu-form-item{
        display: flex;
        justify-content: space-between;
        margin-right: 0;
    }
    >>>.ivu-form .ivu-form-item-label{
        width: 70px;
    }
    >>>.ivu-form-item-content{
        width: calc(100% - 80px);
    }
    .item>>>input{
        
        height: 40px;
        border-radius: 6px;
    }
    .code{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .code>>>.ivu-input-wrapper{
        width: calc(100% - 136px);
    }
    .code span{
        width: 126px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        cursor: pointer;
    }
    .submit>>>.ivu-form-item-content,.submit .ivu-form-item-content button{
        width: 354px;
        height: 48px;
        background: #F30213;
        border-radius: 6px;
        
    }
    .submit>>>.ivu-form-item-content{
        margin-top: 34px;
    }
    >>>.ivu-form-item-content{
        line-height: 0;
    }
    >>>.ivu-modal-footer{
        padding: 0;
        border-top: 0;
    }
    .pact{
        font-size: 0;
        width: 291px;
    }
    .pact>>>.ivu-checkbox-checked .ivu-checkbox-inner{
        background-color: #F30213;
        border-color: #F30213;
    }
    .pact>>>.ivu-checkbox-wrapper{
        margin-right: 0;
    }
    .pact span{
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-right: 0;
    }
</style>
